<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${session.lang == 'en' ? menu.titleEn : menu.title}"></title>
    <meta name="keywords" th:content="${companyProfile.seoKeyword}">
    <meta name="description" th:content="${companyProfile.seoDescription}">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../statics/css/amazeui.min.css">
    <link rel="stylesheet" href="../statics/css/animate.css">
    <link rel="stylesheet" href="../statics/css/layout.css">
    <link rel="stylesheet" href="../statics/css/pages.css">
    <link rel="stylesheet" href="../statics/iconfont/iconfont.css">
    <link rel="stylesheet" href="../statics/css/demo.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../statics/css/venobox/venobox.css" type="text/css" media="screen"/>
    <script src="../statics/js/jquery-1.11.0.min.js"></script>
    <script src="../statics/js/amazeui.min.js"></script>
    <script src="../statics/js/amazeui.lazyload.min.js"></script>
    <script type="text/javascript" src="../statics/js/venobox/venobox.min.js"></script>
</head>
<body>
<style>
    #main-nav-hold .main-nav,
    .am-nav,
    .rb-topnav,
    .rb-topbar {
        background: #192C69;
    }

    .am-slider .am-slides > li {
        display: block !important;
    }

    @media screen and (max-width: 767px) {
        .rb-topbar {
            background: #fff;
        }
    }

    .rb-topnav .rb-pagenav .item > a,
    #main-nav-hold a {
        color: #eee;
    }

    .rb-pagenav a.nav-btn {
        color: #ffbb6d;
    }

    .rb-pagenav .item a.rb-active,
    .rb-pagenav .item a:hover {
        color: #ffffff;
        font-weight: bold;
    }

    .rb-topnav .rb-pagenav .item a.rb-active,
    .rb-topnav .rb-pagenav .item a:hover {
        color: #ffffff;
        font-weight: bold;
    }

    .rb-language {
        color: #ddd;
    }

    .sb-search-input {
        background-color: #fff;
    }

    .sb-search-input::placeholder {
        color: #999 !important;
    }

    .sb-icon-search,
    .sb-search-submit {
        background: url('../statics/images/search-3.png') no-repeat 10px 14px;
    }

    .am-slider-i2 .am-slider-content h2 {
        width: 80%;
        color: #fff;
    }

    .rb-footer {
        border-top: 1px solid #f6f5f5;
    }

    .entry-item {
        background: #f2f2f2;
        width: 48%;
        margin-right: 4%;
        height: 88px;
        line-height: 88px;
        text-align: center;
        display: block;
        font-size: 30px;
        color: #3a3a3a;
        float: left;
        transition: all .4s;
    }

    .entry-item:hover {
        background: #192C69;
        color: #fff;
    }

    .entry-item:last-child {
        margin-right: 0;
    }

    @media (max-width: 991px) {
        .auto-listpro {
            padding: 0 20px;
        }

        .auto-listpro a {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            height: 50px;
            margin-bottom: 20px;
            border-radius: 8px;
        }
    }

    .rb-products .rb-proleft {
        margin-left: 0;
    }

    .rb-products .rb-proright {
        margin-left: 0;
    }

    @media (min-width: 992px) {
        .product-content {
            width: 1200px;
            margin: 0 auto;
        }

        .rb-products .rb-proleft {
            float: left;
        }

        .rb-products .rb-proright {
            float: right;
        }

        .product-img {
            width: 60% !important;
        }

        .product-text {
            width: 40% !important;
        }

        .product-img img {
            width: 100%;
        }

        .rb-pronav,
        .rb-products .cd-timeline-block {
            height: auto !important;
            min-height: auto !important;
        }
    }
</style>
<div th:replace="header :: header"></div>
<div data-am-widget="slider" class="am-slider am-slider-i2" data-am-flexslider="{controlNav:false}">
    <ul class="am-slides">
        <li class="am-slider-images" th:style="'background-image: url(' + ${menu.bgImage} + ');'">
            <div class="am-container am-slider-desc">
                <div class="am-slider-content">
                    <h3 class="up-cn am-animation-slide-right" data-am-scrollspy="{animation:'slide-right', delay: 500}"
                        style="color:#fff;">
                        <th:block th:text="${menu.title}"></th:block>
                    </h3>
                    <h2 class="up-en am-slider-title am-animation-slide-left"
                        data-am-scrollspy="{animation: 'slide-left', delay: 100}">
                        <th:block th:text="${menu.titleEn}"></th:block>
                    </h2>
                    <i data-am-scrollspy="{animation:'slide-bottom', delay: 700}" class="am-animation-slide-bottom"
                       style=" background-color:#fff;"></i>
                    <div data-am-scrollspy="{animation:'slide-left', delay: 1200}"
                         class="rb-bantxt am-animation-slide-right"
                         style="color:#fff;">
                        <th:block th:text="${session.lang == 'en' ? menu.descriptionEn : menu.description}"></th:block>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<!--产品中心-->
<div class="amz-container rb-hg80"></div>
<div class="amz-container" th:if="${productFeatureList != null && !productFeatureList.isEmpty()}">
    <div class="amz-container rb-hg80"></div>
    <div class="am-container-1 text-center rb-currentitle">
        <h3>产品特点</h3>
        <h4>PRODUCT FEATURES</h4>
        <i></i>
    </div>
    <div class="amz-container rb-hg70"></div>
    <div class="am-container-1 rb-listpro about-listpro">
        <figure class="effect-ruby" th:each="p: ${productFeatureList}">
            <a>
                <img th:src="${p.bgImage}" alt=""/>
                <figcaption>
                    <h2 th:text="${session.lang == 'en' ? p.titleEn : p.title}"></h2>
                    <p th:text="${session.lang == 'en' ? p.descriptionEn : p.description}"></p>
                </figcaption>
            </a>
        </figure>
    </div>
    <script>
        var hbimg = $(".rb-proseclist").width();
        $(".rb-proseclist").css("height", hbimg);
    </script>
    <div class="amz-container rb-hg110"></div>
</div>
<!-- 入口 -->
<th:block th:if="${menu.children != null && !menu.children.isEmpty()}" th:each="m, status: ${menu.children}">
    <th:block th:if="${status.index % 2 == 0}">
        <div class="amz-container rb-products am-avg-sm-1 am-avg-md-1 am-avg-lg-1">
            <div class="am-container-1 text-center rb-currentitle">
                <h3 th:text="${menu.title}">自动化装备</h3>
                <h4 th:text="${menu.titleEn}">AUTOMATION EQUIPMENT</h4>
                <i></i>
            </div>
            <div class="cd-timeline-block am-animation-slide-right clearfix"
                 data-am-scrollspy="{animation: 'slide-right', delay: 400}">
                <div class="amz-container rb-hg110"></div>
                <div class="product-content clearfix">
                    <div class="product-img rb-proleft">
                        <img th:src="${m.productImage}" alt=""/>
                    </div>
                    <div class="rb-pronav rb-proright text-position-right product-text">
                        <h3 th:text="${m.title}">标准</h3>
                        <h4 th:text="${m.titleEn}">Standard</h4>
                        <i></i>
                        <div class="rb-prodes" th:text="${session.lang == 'en' ? m.descriptionEn : m.description}">
                        </div>
                        <a th:href="${m.href + '?id=' + m.id}"><span th:text="${i18n.key46}">查看更多</span></a>
                    </div>
                </div>
            </div>
        </div>
    </th:block>
    <th:block th:if="${status.index % 2 != 0}">
        <div class="amz-container rb-products am-avg-sm-1 am-avg-md-1 am-avg-lg-1">
            <div class="cd-timeline-block am-animation-slide-left clearfix"
                 data-am-scrollspy="{animation: 'slide-left', delay: 400}">
                <div class="amz-container rb-hg110"></div>
                <div class="product-content clearfix">
                    <div class="product-img rb-proright">
                        <img th:src="${m.productImage}" alt=""/>
                    </div>
                    <div class="rb-pronav text-position-left rb-proleft product-text">
                        <h3 th:text="${m.title}">非标准</h3>
                        <h4 th:text="${m.titleEn}">Nonstandard</h4>
                        <i></i>
                        <div class="rb-prodes" th:text="${session.lang == 'en' ? m.descriptionEn : m.description}">
                            非标准描述
                        </div>
                        <a th:href="${m.href + '?id=' + m.id}"><span th:text="${i18n.key46}">查看更多</span></a>
                    </div>
                </div>
            </div>
        </div>
    </th:block>
</th:block>
<div class="amz-container rb-hg80"></div>

<script src="../statics/js/canvas.js"></script>
<!--#include file="/public/html/footer.html"-->
<div th:replace="footer :: footer"></div>
</body>
</html>